<template>
 <div class="wrapper">
 <!-- header部分 -->
 <header>
 <p>商家信息</p>
 </header>
 <!-- 商家logo部分 -->
 <div class="business-logo">

 <img :src="business.image || '../assets/sj01.png'">
 </div>
 <!-- 商家信息部分 -->
 <div class="business-info">
 <h1>{{business.businessName || '万家饺子（软件园E18店）'}}</h1>
 <p>&#165;{{business.startingPrice || 15}}起送 &#165;{{business.deliveryFee || 0}}配送</p>
 <p>{{business.description || '各种饺子'}}</p>
 </div>
 <!-- 食品列表部分 -->
 <ul class="food">
 <li v-for="(item, index) in productList" :key="item.id">
 <div class="food-left">
 <img :src="item.image">
 <div class="food-left-info">
 <h3>{{item.name}}</h3>
 <p>{{item.description}}</p>
 <p>&#165;{{item.price}}</p>
 </div>
 </div>
 <div class="food-right">
 <div>
 <i class="fa fa-minus-circle" @click="minus(index)" v-show="foodQuantities[index]!=0"></i>
 </div>
 <p><span v-show="foodQuantities[index]!=0">{{foodQuantities[index]}}</span></p>
 <div>
 <i class="fa fa-plus-circle" @click="add(index)"></i>
 </div>
 </div>
 </li>
 </ul>
 <!-- 购物车部分 -->
 <div class="cart">
 <div class="cart-left">
 <div class="cart-left-icon" :style="totalQuantity==0?'background-color:#505051;':'background-color:#3190E8;'">
 <i class="fa fa-shopping-cart"></i>
 <div class="cart-left-icon-quantity" v-show="totalQuantity!=0">
 {{totalQuantity}}</div>
 </div>

 <div class="cart-left-info">
 <p>&#165;{{totalPriceFormatted}}</p>
 <p>另需配送费{{business.deliveryFee || 0}}元</p>
 </div>
 </div>
 <div class="cart-right">
 <!-- 不够起送费 -->
 <div class="cart-right-item" v-show="totalSettle<(business.startingPrice || 15)" 
style="background-color: #535356;cursor: default;">
 &#165;{{business.startingPrice || 15}}起送
</div>
 <!-- 达到起送费 -->
 <div class="cart-right-item" @click="toOrder" v-show="totalSettle>=(business.startingPrice || 15)">
去结算
</div>
 </div>
 </div>
 </div>
 </template>
<script>
import { getProductsByMerchantId } from '../api/product'

export default {
 name: 'BusinessInfo',
 data() {
 return {
   merchantId: '', // 从路由获取商家ID，默认1
   business: {}, // 商家信息对象
   productList: [], // 商品列表
   foodQuantities: [], // 商品数量数组
   deliveryPrice: 3, // 配送费
   minOrderPrice: 15 // 起送价
 }
 },
 created() {
   this.loadBusinessData();
   this.loadProducts();
 },
 methods: {
   loadBusinessData() {
     // 从路由参数获取商家数据
     const businessData = this.$route.query.businessData;
     if (businessData) {
       try {
         this.business = JSON.parse(businessData);
         // 更新配送费和起送价
         this.merchantId = this.business?.id || this.business?.businessId || 1;
         this.deliveryPrice = this.business?.deliveryFee || 0;
         this.minOrderPrice = this.business?.startingPrice || 15;
       } catch (error) {
         console.error('解析商家数据失败:', error);
         this.business = {};
         this.merchantId = 1;
       }
     } else {
       // 如果没有传递商家数据，使用默认值
       this.business = {};
       this.merchantId = 1;
     }
   },
   async loadProducts() {
     try {
       console.log("商家ID:", this.merchantId);
       if (!this.merchantId) {
         console.warn('商家ID为空，使用默认商品数据');
         this.loadDefaultProducts();
         return;
       }
       const response = await getProductsByMerchantId(this.merchantId);
       this.productList = response.data.data || response.data || [];
       // 初始化商品数量数组
       this.foodQuantities = new Array(this.productList.length).fill(0);
     } catch (error) {
       console.error('获取商品列表失败:', error);
       this.loadDefaultProducts();
     }
   },
   loadDefaultProducts() {
     // 如果API失败，使用默认数据
     this.productList = [
       { id: 1, name: '韭菜鸡蛋饺子', description: '新鲜韭菜配鸡蛋', price: 12 },
       { id: 2, name: '猪肉大葱饺子', description: '精选猪肉配大葱', price: 15 },
       { id: 3, name: '三鲜饺子', description: '虾仁韭菜鸡蛋', price: 18 }
     ];
     this.foodQuantities = [0, 0, 0];
   },
   getProductImage(index) {
     // 根据索引返回对应图片
     const images = ['../assets/m1.png', '../assets/m2.png', '../assets/m3.png', '../assets/m4.png', '../assets/m5.png', '../assets/m6.png'];
     return images[index % images.length];
   },
 add(index) {
   // 检查登录状态
   const user = this.$getSessionStorage('user');
   if (!user) {
     this.$router.push('/login');
     return;
   }
   this.foodQuantities[index]++;
 },
 minus(index) {
   // 检查登录状态
   const user = this.$getSessionStorage('user');
   if (!user) {
     this.$router.push('/login');
     return;
   }
   if (this.foodQuantities[index] > 0) {
     this.foodQuantities[index]--;
   }
 },
 toOrder() {
  // 将当前购物车（已选数量>0的商品）保存到本地，带到结算页
  const user = this.$getSessionStorage('user');
  if (user) {
    // 同步保存当前配送费到本地，供订单页读取
    const feeKey = `deliveryPrice`;
    this.$setLocalStorage(feeKey, Number(this.deliveryPrice || 0));

    // 保存商家信息到 SessionStorage，以便在结算页面使用
    this.$setSessionStorage('business', {
      businessName: this.business.businessName || '万家饺子（软件园E18店）',
    });

    const cart = [];
    for (let i = 0; i < this.productList.length; i++) {
      const qty = this.foodQuantities[i] || 0;
      if (qty > 0) {
        const p = this.productList[i];
        cart.push({
          food: {
            foodImg: this.getProductImage(i),
            foodName: p.name,
            foodPrice: p.price,
            id: p.id,
          },
          quantity: qty,
        });
      }
    }
    // 以 userId + businessId 作为 key，避免污染其它商家/用户
    const key = `cart_${user.id || user.userId}_${this.merchantId}`;
    this.$setLocalStorage(key, cart);
  }
  this.$router.push({ path: '/orders', query: { businessId: this.merchantId, deliveryFee: this.deliveryPrice } });
 }
 },
 computed: {
 //食品总价格
 totalPrice() {
   let total = 0;
   for (let i = 0; i < this.productList.length; i++) {
     total += this.productList[i].price * this.foodQuantities[i];
   }
   return Number(total);
 },
 //食品总数量
 totalQuantity() {
   let quantity = 0;
   for (let qty of this.foodQuantities) {
     quantity += qty;
   }
   return quantity;
 },
 //结算总价格
 totalSettle() {
   return Number(this.totalPrice + (this.business.deliveryFee || this.deliveryPrice));
 },
 // 两位小数格式化
 totalPriceFormatted() {
   return this.totalPrice.toFixed(2);
 },
 totalSettleFormatted() {
   return this.totalSettle.toFixed(2);
 }
 }
 }
 </script>
 <style scoped>
 /****************** 总容器 ******************/
 .wrapper {
 width: 100%;
 height: 100%;
 }
 /****************** header部分 ******************/
 .wrapper header {
 width: 100%;
 height: 12vw;
 background-color: #0097FF;
 color: #fff;
 font-size: 4.8vw;
 position: fixed;
 left: 0;
 top: 0;
 z-index: 1000;
 display: flex;
 justify-content: center;
 align-items: center;
 }
 /****************** 商家logo部分 ******************/
 .wrapper .business-logo {
 width: 100%;
 height: 35vw;
 /*使用上外边距避开header部分*/
 margin-top: 12vw;
 display: flex;
 justify-content: center;
 align-items: center;
 }
 .wrapper .business-logo img {
 width: 40vw;
 height: 30vw;
 border-radius: 5px;
 }
 /****************** 商家信息部分 ******************/
 .wrapper .business-info {
width: 100%;
 height: 20vw;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 }
 .wrapper .business-info h1 {
 font-size: 5vw;
 }
 .wrapper .business-info p {
 font-size: 3vw;
 color: #666;
 margin-top: 1vw;
 }
 /****************** 食品列表部分 ******************/
 .wrapper .food {
 width: 100%;
 /*使用下外边距避开footer部分*/
 margin-bottom: 14vw;
 }
 .wrapper .food li {
 width: 100%;
 box-sizing: border-box;
 padding: 2.5vw;
 user-select: none;
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 .wrapper .food li .food-left {
 display: flex;
 align-items: center;
 }
 .wrapper .food li .food-left img {
 width: 20vw;
 height: 20vw;
 }
 .wrapper .food li .food-left .food-left-info {
 margin-left: 3vw;
 }
 .wrapper .food li .food-left .food-left-info h3 {
 font-size: 3.8vw;
color: #555;
 }
 .wrapper .food li .food-left .food-left-info p {
 font-size: 3vw;
 color: #888;
 margin-top: 2vw;
 }
 .wrapper .food li .food-right {
 width: 16vw;
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 .wrapper .food li .food-right .fa-minus-circle {
 font-size: 5.5vw;
 color: #999;
 cursor: pointer;
 }
 .wrapper .food li .food-right p {
 font-size: 3.6vw;
 color: #333;
 }
 .wrapper .food li .food-right .fa-plus-circle {
 font-size: 5.5vw;
 color: #0097EF;
 cursor: pointer;
 }
 /****************** 购物车部分 ******************/
 .wrapper .cart {
 width: 100%;
 height: 14vw;
 position: fixed;
 left: 0;
 bottom: 0;
 display: flex;
 }
 .wrapper .cart .cart-left {
 flex: 2;
 background-color: #505051;
 display: flex;
 }
 .wrapper .cart .cart-left .cart-left-icon {
 width: 16vw;
height: 16vw;
 box-sizing: border-box;
 border: solid 1.6vw #444;
 border-radius: 8vw;
 background-color: #3190E8;
 font-size: 7vw;
 color: #fff;
 display: flex;
 justify-content: center;
 align-items: center;
 margin-top: -4vw;
 margin-left: 3vw;
 position: relative;
 }
 .wrapper .cart .cart-left .cart-left-icon-quantity {
 width: 5vw;
 height: 5vw;
 border-radius: 2.5vw;
 background-color: red;
 color: #fff;
 font-size: 3.6vw;
 display: flex;
 justify-content: center;
 align-items: center;
 position: absolute;
 right: -1.5vw;
 top: -1.5vw;
 }
 .wrapper .cart .cart-left .cart-left-info p:first-child {
 font-size: 4.5vw;
 color: #fff;
 margin-top: 1vw;
 }
 .wrapper .cart .cart-left .cart-left-info p:last-child {
 font-size: 2.8vw;
 color: #AAA;
 }
 .wrapper .cart .cart-right {
 flex: 1;
 }
 /*达到起送费时的样式*/
 .wrapper .cart .cart-right .cart-right-item {
 width: 100%;
height: 100%;
 background-color: #38CA73;
 color: #fff;
 font-size: 4.5vw;
 font-weight: 700;
 user-select: none;
 cursor: pointer;
 display: flex;
 justify-content: center;
 align-items: center;
 }
 /*不够起送费时的样式（只有背景色和鼠标样式的区别）*/
 /*
 .wrapper .cart .cart-right .cart-right-item{
 width: 100%;
 height: 100%;
 background-color: #535356;
 color: #fff;
 font-size: 4.5vw;
 font-weight: 700;
 user-select: none;
 display: flex;
 justify-content: center;
 align-items: center;
 }
 */
 </style>